<script setup lang="ts">
  import { reactive, ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import {
    Tabs,
    TabPane,
    Card,
    Row,
    Col,
    Avatar,
    Image,
    Popover,
    Divider,
    List,
    ListItem,
  } from '@arco-design/web-vue';
  import type { TopicRecord } from '/@/api/model/topicModel';
  import { infoTopic } from '/@/api/topic';
  import { queryBanner } from '/@/api/banner';
  import type { BannerRecord } from '/@/api/model/recommendModel';
  import type { Hotspot_topicRecord } from '/@/api/model/hotspotModel';
  import { queryHotspot_topicList } from '/@/api/hotspot';
  import type { HostpotPage } from '/@/api/model/pinsModel';
  import { queryHostPageList } from '/@/api/pins';
  import DOMPurify from 'dompurify';
  import { useGlobalScroll } from '/@/hooks/useScroll';
  import likeSvg from '/@/assets/pins/like.svg';
  import shareIcon from '/@/assets/pins/share.svg';
  import commentIcon from '/@/assets/pins/comment.svg';

  const route = useRoute();
  const topic_id = ref<number>();
  const topicInfo = ref<TopicRecord>();
  const bannerList = ref<BannerRecord[]>();
  const Hotspot_topicList = ref<Hotspot_topicRecord[]>([]);
  const pinsListLoading = ref(false);
  const isLoading = ref(false);
  const { arrivedState } = useGlobalScroll({ offset: { bottom: 10 } });

  watch(
    () => route.params.id,
    (id) => {
      topic_id.value = parseInt(Array.isArray(id) ? id[0] : id, 10) ?? 0;
    },
    { immediate: true },
  );

  const pinsParams = reactive({
    page: 1,
    topic_id: topic_id.value,
    community_id: '',
  });

  watch(
    () => arrivedState.bottom,
    (isReachBottom) => {
      if (isReachBottom) {
        if (pinsListLoading.value) return;
        pinsParams.page++;
      }
    },
  );

  const pinsList = ref<HostpotPage[]>([]);
  watch(
    pinsParams,
    async () => {
      try {
        if (pinsListLoading.value) return;
        pinsListLoading.value = true;
        let res = await queryHostPageList({ ...pinsParams, size: 20 });
        res.list.map((item) => {
          item.content = DOMPurify.sanitize(item.content);
        });
        pinsList.value.push(...res.list);
        pinsListLoading.value = false;
      } catch (error) {}
    },
    { immediate: true },
  );

  watch(
    [topic_id],
    async ([topic_id]) => {
      if (topic_id) {
        isLoading.value = true;
        topicInfo.value = await infoTopic({ id: topic_id });
        isLoading.value = false;
      }
    },
    { immediate: true },
  );

  const getBanner = async () => {
    let params = {
      type_id: 3,
    };
    bannerList.value = await queryBanner(params);
  };

  const getFollow_Topic = async () => {
    let params = {
      recommend: 0,
    };
    const data = await queryHotspot_topicList(params);
    Hotspot_topicList.value = data.slice(0, 10);
  };

  getBanner();
  getFollow_Topic();
</script>

<template>
  <div class="w-full px-[60px]">
    <a-row class="pt-[15px]" :gutter="20">
      <a-col :span="18">
        <a-card :bordered="false" class="min-h-[100px] p-[10px]">
          <a-row>
            <a-col :span="2">
              <a-avatar shape="square" :size="64" :imageUrl="topicInfo?.cover" />
            </a-col>
            <a-col :span="22">
              <div class="ml-[10px] text-[24px] font-black text-[#000]">{{ topicInfo?.name }}</div>
              <div class="ml-[10px] mt-[5px] text-[12px] font-black text-[#999]"
                >简介：{{ topicInfo?.content }}</div
              >
            </a-col>
          </a-row>
          <a-row class="mt-[20px]">
            <a-col :span="1">
              <a-avatar :style="{ backgroundColor: '#9999' }" :size="34">
                <IconUser />
              </a-avatar>
            </a-col>
            <a-col :span="23">
              <div class="bg-[#f2f3f5] ml-[10px] h-[80px] p-[10px]">
                # {{ topicInfo?.name }} #
              </div>
            </a-col>
          </a-row>
        </a-card>

        <Card
          class="type-card mb-[5px] mt-[15px] rounded-[8px] bg-[rgba(255,255,255,0.8)]"
          :bordered="false"
        >
          <tabs default-active-key="1" class="type-tabs">
            <tab-pane key="1">
              <template #title>
                <span class="font-bold">热门</span>
              </template>
            </tab-pane>
            <tab-pane key="2">
              <template #title>
                <span class="font-bold">最新</span>
              </template>
            </tab-pane>
          </tabs>
        </Card>

        <List :bordered="false" class="mt-1">
          <a-card v-if="pinsListLoading">
            <a-skeleton animation>
              <a-space direction="vertical" :style="{ width: '100%' }" size="large">
                <a-skeleton-line :rows="4" />
              </a-space>
            </a-skeleton>
          </a-card>
          <ListItem v-for="item of pinsList" :key="item.id" class="p-0">
            <Card
              class="user-topic-card mb-[10px] rounded-[8px] bg-[rgba(255,255,255,0.8)]"
              :bordered="false"
            >
              <Row>
                <Col :span="1" class="mt-[2px]">
                  <Avatar :size="45" :image-url="item.user_icon" />
                </Col>
                <Col :span="12" class="pl-[15px]">
                  <div class="text-[18px] font-bold">{{ item.user_name }}</div>
                  <div>
                    <span class="text-[12px] text-[#909090]">{{ $timeAgo(item.createTime) }}</span>
                  </div>
                </Col>
                <Col :span="11" class="text-right">
                  <Avatar
                    v-for="i of 3"
                    :key="i"
                    :style="{ 'z-index': i }"
                    class="filter-shadow ml-[-5px] bg-transparent"
                    :size="25"
                    :image-url="item.user_icon"
                  />
                  <span class="font-[400] text-[rgba(0,0,0,0.5)] ml-1">等人赞过</span>
                </Col>
              </Row>
              <Row class="overflow-auto mb-2 pt-[20px]">
                <Col :span="1" />
                <Col
                  :span="23"
                  class="text-[16px] ml-[55px] py-[10px] box-border rounded-[8px] relative"
                >
                  <!-- <img :src="triangleImg" class="absolute w-[34px] left-[17px] top-[-18px]" /> -->
                  <div
                    v-html="item.content"
                    class="w-full max-h-[128px] text-[rgba(0,0,0,0.8) font-[500] text-[14px] overflow-auto"
                  ></div>
                  <div v-if="item.img?.length < 5" class="w-full max-h-[350px] overflow-hidden">
                    <Image
                      v-for="(img, i) of item?.img"
                      :key="i"
                      class="w-[200px] h-[200px] rounded-[4px] pt-[6px] pr-[6px] box-border"
                      :src="img"
                    />
                  </div>
                  <div v-else class="w-full max-h-[350px] overflow-hidden">
                    <Image
                      v-for="(img, index) of item?.img"
                      :key="index"
                      class="w-[110px] h-[110px] pt-[6px] pr-[6px] box-border"
                      :src="img"
                    />
                  </div>
                </Col>
              </Row>
              <Divider />
              <Row class="cursor-pointer flex justify-end">
                <Col
                  :span="2"
                  class="text-center flex items-center justify-center text-[rgba(0,0,0,0.5)]"
                >
                  <img :src="likeSvg" class="w-[16px] h-[16px] mr-[4px]" />
                  点赞
                </Col>
                <Col
                  :span="2"
                  class="text-center flex items-center justify-center text-[rgba(0,0,0,0.5)]"
                >
                  <img :src="commentIcon" class="w-[16px] h-[16px] mr-[4px]" />
                  评论
                </Col>
                <Popover title="" trigger="click" position="bottom" content-class="emoji-content">
                  <template #content>
                    <div class="w-132px">
                      <Row>
                        <Col class="flex items-center">
                          <IconShareAlt class="mr-2" /> 复制链接1</Col
                        >
                      </Row>
                      <Divider />
                      <Row>
                        <Col class="flex items-center">
                          <IconShareAlt class="mr-2" /> 复制链接2</Col
                        >
                      </Row>
                      <Divider />
                      <Row>
                        <Col class="flex items-center">
                          <IconShareAlt class="mr-2" /> 复制链接3</Col
                        >
                      </Row>
                    </div>
                  </template>
                  <Col
                    :span="2"
                    class="text-center flex items-center justify-center text-[rgba(0,0,0,0.5)]"
                  >
                    <img :src="shareIcon" class="w-[16px] h-[16px] mr-[4px]" />
                    转发
                  </Col>
                </Popover>
              </Row>
            </Card>
          </ListItem>
        </List>
      </a-col>
      <a-col :span="6">
        <div>
          <a-carousel
            :style="{
              width: '100%',
              height: '160px',
            }"
            :auto-play="true"
            indicator-type="dot"
            show-arrow="hover"
          >
            <a-carousel-item v-for="(item, index) in bannerList" :key="index">
              <img :src="item.url" />
            </a-carousel-item>
          </a-carousel>
        </div>
        <a-card class="mt-[15px]" :bordered="false" title="推荐话题">
          <a-row v-for="(item, index) in Hotspot_topicList" :key="index" class="w-full !px-0 !py-2">
            <a-col :span="18"
              ><a class="block" :href="'/pins/topic/' + item.id" target="_blank"
                >#{{ item.name }}#</a
              ></a-col
            >
            <a-col :span="4" :offset="2" class="w-[60px] text-right text-[rgba(0,0,0,0.5)]"
              >99k+
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<style scoped>
  .center-card :deep(.arco-card-header) {
    border: none;
    height: 74px;
  }

  .center-card :deep(.arco-card-header-title) {
    font-size: 20px;
    font-weight: bold;
  }
</style>

<style scoped>
  .type-card >>> .arco-tabs-content {
    padding: 0 !important;
  }

  .type-card >>> .arco-tabs-nav::before {
    display: none !important;
  }

  .filter-shadow {
    filter: drop-shadow(-2px 0px 4px rgba(0, 0, 0, 0.25));
  }
</style>
